<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form';

import { reactive, watch } from 'vue';
// import { getCaptchaImage, userLogin } from "#/api"
import { useRouter } from 'vue-router';

import {
  Button,
  Checkbox,
  Form,
  FormItem,
  Input,
  InputPassword,
} from 'ant-design-vue';

import { useAuthStore } from '#/store';

const router = useRouter();
const authStore = useAuthStore();

const goRegister = () => router.replace('/auth/register');

authStore.refreshCaptchaImage();

const userRegisterData = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
  remember: true,
});

const VaildataRules: Record<string, Rule[]> = {
  username: [
    {
      required: true,
      trigger: 'blur',
      min: 5,
      max: 20,
    },
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      min: 5,
      max: 20,
    },
  ],
  confirmPassword: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
  uuid: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
};

// 回调函数中又很多依赖项 如果其中任何依赖发生变化 需要回调函数执行用watchEffect
// 只要又一个不行 使用watch
watch([authStore.captcha], () => {
  userRegisterData.uuid = authStore.captcha.uuid;
});
</script>

<template>
  <div>
    <h1 class="mb-4 text-[28px]">欢迎回来 👋🏻</h1>
    <Form
      :model="userRegisterData"
      :rules="VaildataRules"
      @finish="authStore.authLogin"
    >
      <!-- 用户名 -->
      <FormItem name="username" label="用户名">
        <Input
          v-model:value="userRegisterData.username"
          placeholder="请输入用户名"
        />
      </FormItem>
      <!-- 密码 -->
      <FormItem name="password" label="密码">
        <InputPassword
          v-model:value="userRegisterData.password"
          placeholder="请输入密码"
        />
      </FormItem>
      <!-- 验证码 -->
      <FormItem name="code" label="验证码">
        <div class="flex gap-2">
          <Input v-model:value="userRegisterData.code" placeholder="验证码" />
          <img
            class="h-[32px]"
            :src="authStore.captcha.img"
            alt=""
            @click="authStore.refreshCaptchaImage"
          />
        </div>
      </FormItem>
      <FormItem name="uuid" class="hidden">
        <Input :value="userRegisterData.uuid" />
      </FormItem>
      <!-- 记住密码 -->
      <FormItem name="remember">
        <Checkbox v-model:checked="userRegisterData.remember">
          记住密码
        </Checkbox>
      </FormItem>
      <!-- 提交表单 -->
      <FormItem>
        <Button type="primary" html-type="submit" block>登录</Button>
      </FormItem>
      <div class="mt-4 text-center text-sm">
        还没有账号?
        <span class="vben-link text-sm font-normal" @click="goRegister">
          去注册
        </span>
      </div>
    </Form>
  </div>
</template>

<style scoped>
:deep(.ant-form-item-label) {
  display: none;
}
</style>
